<!---->
<template>
  <div class="add-block">
    <p class="role-title">设置部门</p>
    <p class="role-bottom">用户所属角色管理的部门：</p>
    <el-input type="textarea" :rows="2" v-model="roleData" class="role-hint" :disabled="true"></el-input>
    <div style="height:100px"></div>
    <p class="role-bottom">销售总监 : 市场部(角色可管理本部门)<br />部门经理 : 市场部(角色可管理本部门)</p>
    <div class="role-foot">
      <el-button size="small" type="primary" @click="ExportVisible = true">选择</el-button>
      <el-button size="small" type="primary">确定</el-button>
    </div>
    <el-dialog title="请选择部门" v-model="ExportVisible" center>
      <el-tree :data="treeData.data" node-key="id" default-expand-all show-checkbox ref="ExportTree" style="margin: 10px 0 0 10px;">
        <template #default="{ node }">
          <i class="el-icon-folder-opened"></i>
          <span class="custom-tree-node">
            <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="ExportVisible = false">取 消</el-button>
          <el-button type="primary" @click="onAddSubmit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<script>
import { toRefs, reactive, onMounted } from 'vue';
export default {
  setup() {
    const state = reactive({
      ExportVisible: false,
      treeData: {
        data: [
          {
            id: 1,
            label: '南京云网',
            children: [
              {
                id: 2,
                label: '总经办',
              },
              {
                id: 3,
                label: '行政部',
              },
              {
                id: 4,
                label: '市场部',
              },
              {
                id: 5,
                label: '财务部',
              },
              {
                id: 6,
                label: '事业部',
                children: [
                  {
                    id: 7,
                    label: '商务部2',
                  },
                  {
                    id: 8,
                    label: '采购部2',
                  },
                  {
                    id: 9,
                    label: '研发部',
                  },
                  {
                    id: 10,
                    label: '推广部',
                  },
                ],
              },
            ],
          },
        ],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
      },
      roleData: []
    });
    // 页面加载时
    onMounted(() => {
    });
    return {
      ...toRefs(state),
    };
  },
  methods: {
    onAddSubmit() {
      this.ExportVisible = false
      let arr = []
      this.$refs.ExportTree.getCheckedNodes().map(i => {
        arr.push(i.label)
      })
      this.roleData = [...arr]
    }
  },
};
</script>


<style lang='scss' scoped>
@import './config.scss';
</style>